<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { onMounted } from 'vue'

// 在组件挂载后调用
onMounted(() => {
  getList()
})

/*getList()想让网页渲染的时候，就执行某个函数，直接在script标签中进行调用即可*/

const content = ref('')

const list = ref([])
//创建数组，数组中的每一项，是变量，变量中有两个值
//一个是是否被选中，一个是文字
  /*{isComplete:false,text:"吃饭"},
  {isComplete:true,text:"睡觉"},
  {isComplete:false,text:"打豆豆"}
  把括号里面的list默认值删除，
  在下面增加list.value = res.data.list代码
  每次打开页面，就会执行getList函数*/

  async function getList(){
  //const res = await axios.get('/api/get_list')
   const res = await axios({
      url:"https://q6zv39.laf.run/get_list",
      method:"GET",
    })
    list.value = res.data.list
    console.log(res)
  }

async function add(){/*使用add函数增加list列表中的项*/
  //list.value.push({isComplete:false,text:content.value})/*用push函数*/
  //content.value=' '
  await axios({
    url:"https://q6zv39.laf.run/add_todo",
    method:'POST',
    data:{
      value:content.value,
      isComplete:false
    },
  })
  getList()
}

async function update(id){
  await axios({
    url:"https://q6zv39.laf.run/update_todo",
    method:"POST",
    data:{
      id,
    },
  })
  getList()
}

async function del(id){
  await axios({
    url:"https://q6zv39.laf.run/del_todo",
    method:"POST",
    data:{
      id,
    },
  })
}

async function del(id){/*index即要删除的项*/
  /*list.value.splice(index,1)
  当你执行这个函数的时候，需要告诉我要删除哪一个*/
  await axios({
    url:"https://q6zv39.laf.run/del_todo",
    method:"POST",
    data:{
      id,
    },
  })
  getList()
}

</script>

<template>
 <div class="todo-app">
    <div class="title">Todo-app</div>
    <div class="todo-from">
      <input v-model="content" class="todo-input" type="text" placeholder="Add a todo">
      <div @click="add" class="todo-button">add todo</div>
    </div>
    <div v-for="(item,index) in list" :key="item.id" 
    :class="[item.isComplete ? 'completed':'item']"
    >
      <div>
        <input @click="update(item._id)" v-model="item.isComplete" type="checkbox"/>
        <span class="name">{{item.text}}</span>
      </div>
      <div @click="del(item._id)" class="del">del</div>
    </div>
  </div>
</template>

<style scoped>
    .completed{
      display: flex;
      align-items: center;/*让盒子里的文字更加居中*/
      justify-content: space-between;/*让盒子里的文字自己平均分配*/
      box-sizing: border-box;
      width: 80%;
      height: 50px;
      margin: 8px auto;
      padding: 16px;
      border-radius: 20px;
      box-shadow: rgba(149, 157, 165, 0.3)0px 8px 20px;
      text-decoration: line-through;/*在字上面画横线*/
      opacity: 0.4;/*透明度*/
    }
    .del{
      color: red;
    }
    .item{
      display: flex;
      align-items: center;/*让盒子里的文字更加居中*/
      justify-content: space-between;/*让盒子里的文字自己平均分配*/
      box-sizing: border-box;
      width: 80%;
      height: 50px;
      margin: 8px auto;
      padding: 16px;
      border-radius: 20px;
      box-shadow: rgba(149, 157, 165, 0.3)0px 8px 20px;
    }
    .todo-button{
      width: 100px;
      height: 52px;
      border-radius: 0 20px 20px 0;
      text-align: center;
      color: #ffffff;
      line-height: 52px;
      background: linear-gradient(
        to right,
        rgb(133,65,168),
        rgba(44,114,251,1)
      );
      cursor: pointer; /*手指*/
      user-select: none;/*不能选中复制*/
      color: #ffffff;
    }

    .todo-input{
      padding-left: 15px;
      border: 1px solid #dfe1e5;
      outline: none;
      width: 60%;
      height: 50px;
      border-radius: 20px 0 0 20px;
    }
    .todo-from{
      display: flex;
      margin-top: 20px;
      margin-left: 10%;
      margin-right: 10%;
    }
    
    .todo-app{
      width: 98%;
      height: 500px;
      padding-top: 5px;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 5px;
      margin-top: 40px;
      margin-left: 1%;
    }
    .title{
      margin-top: 40px;
      font-size: 30px;
      font-weight: 600;
      text-align: center;
    }
  </style>

